<template>
    <div class="left">
        <el-menu
      default-active="/recruit"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      router
      
      >
      <el-submenu index="1" v-if="teachershow">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>学生会管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/recruit">学生会招人</el-menu-item>
          <el-menu-item index="/examine">审核学生会申请</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      
      <el-submenu index="2" v-if="adminshow">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>角色管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/roleOperation">角色操作</el-menu-item>
          <el-menu-item index="/assignRoles">分配角色</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

    </el-menu>
    </div>
</template>

<script>
export default {
    data () {
        return {
            adminshow:true,
            teachershow:true
        }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style scoped>
.el-menu {
    border: 0;
}
.left{
    margin-left: 150px;
    border-right: solid 1px #e6e6e6;
width: 230px;
  position: fixed;
  left: 0;
  top: 81px;
  bottom: 0;
}
</style>